<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { Toast } from 'vant';
export default {
  setup() {
    let router = useRouter();

    let data = reactive({
      checked: false, //勾选状态
      btntext: "获取验证码", //切换文字
      run: false,
      phone:null,
      password:null,
      shelf:[
        {
          id:1,
          src:"https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg",
          name:"斗罗大陆V 重生唐三",
          last:996,
          have:"完结",
          del:false,
          show:false
        }
      ],
      comment:[
        {
          id:1,
          time:"2021-07-07",
          text:"针对725章，我想讨论:不是圣人的我会选择就孙老虎，看到现在我发现主角一直在为了某一个人质害死更多人哈，学校那次也是，还有一个很奇怪的，军方既然知道景王爷的事出手灭了景王爷，那为什么他的上线也就是江北残到组织不一网打尽，既然军方是类似于神助攻那是不是说作者用太早了，毕竟景王爷要军方出手难道整个组织还不如景王爷，而且好像还只是个中层老大，还没到上层，要是结果组织靠他们几个就搞定了。我只能说作者最厉害",
          comment:[
            {
              id:1,
              text:"？江北残刀就是七个人组成的景王爷是最强的一个",
              src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609081952_51ef5.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672799044&t=cc45ce5165dc04f3ed2dbe103edb39f0",
              name:"一战成明",
              time:"11-27",
              like:2,
              show:false
            },
            {
              id:2,
              text:"第二部为什么不写宋阳！！！",
              src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F19%2F20210519212438_ced7e.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672799044&t=5a82abbdfe1ba4f2f4864bba9e5916b7",
              name:"爱吃奶酪条的魏真",
              time:"10-27",
              like:0,
              show:false
            },
            {
              id:3,
              text:"他就是为上层",
              src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330091314_yNVUZ.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672799044&t=f8e3eb7720ba4059014034cc0ade7f4c",
              name:"基尼太美",
              time:"2021-11-07",
              like:0,
              show:false
            }
          ],
          like:0,
          name:"昵称不好取就算了",
          src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672799044&t=05d874065cf9aed3efe41c86d5b09d62",
          img:[]
        }
      ],
      guanzhu:[
        {
          id:1,
          name:"昵称不好取就算了",
          img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202103%2F31%2F20210331160001_9a852.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672799044&t=05d874065cf9aed3efe41c86d5b09d62",
          flag:true,
        }
      ]
    });

    let check = () => {
      //勾选方法
      data.checked = !data.checked;
      console.log(data.checked);
    };

    //返回方法
    let back = () => {
      router.back();
    };

    //登录方法
    let login = () => {
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(!reg.test(data.phone)){
        Toast.fail("请输入正确的手机号码")
          return
      }
      var password
      if(!data.run) {
        password = parseInt(Math.random()*(9999-1000)+1000)
        console.log(password);
        window.localStorage.setItem("password",password)
        Toast("验证码为:"+password)
      }
      
      if(data.run) {
        password=window.localStorage.getItem("password")
        console.log(data.password,password);
        if(data.password!=password){
          Toast.fail("验证码错误")
          return
        }
        else{
          Toast.success("登录成功")
          window.localStorage.setItem("token","EndNovel")
          window.localStorage.setItem("coin",10)
          window.localStorage.setItem("tickey",20)
          window.localStorage.setItem("shelf",JSON.stringify(data.shelf))
          window.localStorage.setItem("comment",JSON.stringify(data.comment))
          window.localStorage.setItem("guanzhu",JSON.stringify(data.guanzhu))
          router.push("/center");
        }
      }
    }

    let runFun = () => {
      
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(!reg.test(data.phone)){

          return
      }
      data.run = true;
      if (data.run) {
        data.btntext = "登录";
      } else {
        data.btntext = "获取验证码";
      }
    };

    return {
      data,
      check,
      back,
      runFun,
      login
    };
  },
};
</script>

<template>
  <div class="login_box">
    <div class="container">
      <div class="login_top">
        <span class="iconfont icon-arrow-left" @click="back"></span>
        <p>帮助</p>
      </div>
      <div class="hello">
        <h2>你好,</h2>
        <h2>欢迎来到奇坛</h2>
      </div>
    </div>
    <div class="login_bottom">
      <div class="containers">
        <div class="login-inputs">
          <input
          v-model="data.phone"
            :class="[data.run ? 'run' : '']"
            type="text"
            placeholder="请输入您的手机号"
          />
          <input
            v-model="data.password"
            :class="[data.run ? 'run' : '']"
            type="text"
            placeholder="请输入验证码"
          />
        </div>
        <div :class="['button', data.checked ? 'ok' : '']" @click="runFun">
          <button @click="login">{{ data.btntext }}</button>
        </div>
        <div class="item">
          <div class="content">
            <!-- <input type="checkbox"> -->
            <div
              :class="['checkbox', data.checked ? 'con' : '']"
              @click="check"
            ></div>
            <span
              >已阅读并同意<u> 用户协议 </u>和<u> 隐私政策 </u>以及<u>
                运营商服务协议 </u
              >，运营商将对你提供的手机号</span
            >
          </div>
          <p>进行验证</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "../assets/font-two/iconfont.css";
.login_box {
  width: 100%;
  background-color: #a3a791;
  .container {
    padding: 0 20px;

    .login_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      color: #fff;

      .icon-arrow-left {
        font-size: 20px;
      }
    }

    .hello {
      color: #fff;
      padding: 40px 20px;

      h2 {
        font-weight: 600;
        margin-bottom: 18px;
      }
    }
  }

  .login_bottom {
    background-color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    width: 100%;

    .containers {
      padding: 0 38px;
      .login-inputs {
        display: flex;
        padding-top: 60px;
        border-bottom: 1px solid #eee;
        width: 80%;
        overflow: hidden;
        input {
          border: none;
          padding: 14px 0;
          font-size: 20px;
          // overflow: hidden;
          transition: all 0.4s linear;
        }
        input.run {
          transform: translateX(-100%);
        }
      }

      .button {
        width: 100%;
        margin-top: 30px;

        button {
          width: 100%;
          border-radius: 30px;
          padding: 12px 0;
          font-size: 17px;
          color: #fff;
          font-weight: 600;
          background-color: #fdd3be;
          border: none;
        }
      }
      .button.ok {
        button {
          width: 100%;
          border-radius: 30px;
          padding: 12px 0;
          font-size: 17px;
          color: #fff;
          font-weight: 600;
          background-color: #f96825;
          border: none;
        }
      }

      .item {
        padding: 0 22px;
        font-size: 12px;
        color: #bbbbbb;
        margin-top: 22px;
        .content {
          display: flex;
          align-items: flex-start;
          .checkbox {
            display: block;
            position: relative;
            width: 14px;
            height: 14px;
            line-height: 16px;
            border-radius: 50%;
            border: 1px solid #ccc;
            // background-color: red;
            margin-right: 5px;
          }
          .checkbox.con {
            border: 1px solid transparent;
            background-color: #f96825;
            &::after {
              content: "";
              display: block;
              position: absolute;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background-color: #fff;
              top: 0px;
              right: 0px;
              bottom: 0px;
              left: 0px;
              margin: auto;
            }
          }
          span {
            width: 240px;
            display: block;
          }
          // input {
          //     margin-top: 2px;
          //     margin-right: 8px;
          // }
        }
        p {
          text-align: center;
          margin-top: 10px;
          padding-bottom: 196px;
        }
      }
    }
  }
}
</style>